<template>
  <div class="layout">
    <h2 class="function-header">公告</h2>
    <div class="notice-list">
      <template v-if="tableData?.length > 0">
        <NoticeList v-if="tableData && tableData.length > 0" :noticeData="tableData" :layout="false" />

        <!-- <div class="notice-item"  v-for="item in tableData" :key="item.id" @click="showAll(item)">
          <el-icon class="left-icon"><ArrowRight /></el-icon>
          <div class="notice-title">{{ item.title }}<span class="read-state" v-if="item.state"></span></div>
          <div class="right-info">
            <div class="time">{{ formatDate(item?.createdAt,"yyyy.MM.dd") }}</div>
          </div>
        </div> -->
        <PaginationView
          :isAffix = "false"
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :allChoose="isAllChooseBtn"
          :pageChoose="isPageChooseBtn"
          :options="batchOptions"
          :checkedNum="checkedNum"
          :canChoose="false"
          @changeSize="handleSizeChange"
          @currentChange="handleCurrentChange"
          @changePageChoose="handlePageChoose"
          @changeAllChoose="handleAllChoose"
          @invertChoose="handleInvertChoose"
          @checkOption="handleBatchOptions"
          @refreshList="getNotice"
          @cancelChoose="handleResetPagination"
        />
      </template>
      <el-empty v-else description="暂无数据" />

    </div>
    
    <el-dialog v-model="showAllVisible" title="消息通知" width="60%" class="notice-title">
      <div class="notice-title" >{{ currentNotice.title }}</div>
      <div class="bottom-info">
        <!-- <div class="from"><span>来源：</span>{{currentNotice.from}}</div> -->
        <div class="time">发布时间：{{ formatDate(currentNotice?.createdAt,"yyyy.MM.dd") }}</div>
        <div class="bottom-line"></div>
      </div>
      <el-scrollbar max-height="400px">
        <div class="notice-html" v-html="currentNotice.content"></div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="showAllVisible = false">我知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { pagingAnnouncement } from '@/api/notice';
import { tableList as mixTable } from "@ruifox-cms/utils";
import { formatDate } from '@/utils/tools'
// import { ArrowRight } from '@element-plus/icons-vue';
import NoticeList from "../components/NoticeList.vue";

const currentNotice = ref({});
const showAllVisible = ref(false);
// const showAll = (row) => {
//   showAllVisible.value = true;
//   currentNotice.value = row;
//   //发送已读
// }

//分页器
const {
  queryData,
  tableData,
  // tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: pagingAnnouncement,
  // batchFuncApi: deleteByIdsCourse,
});

const defaultForm = reactive({
  currentPage: 1,
  pageSize: 10,
  sort: "top",
  order: "aesc",
  type: "SYSTEM",  //默认公告是系统公告
  title: "",
  top: ""
})
Object.assign(queryData, defaultForm);

onMounted(() => {
  getTableData()
  console.log("tableData",tableData);
})
</script>

<style scoped lang="scss">
.function-header{
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.notice-list{
  margin: px2rem(40) 0;
}
.notice-item{
  padding: $padding-medium;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-bottom: px2rem(10);
  cursor: pointer;
  display:flex;
  align-items: center;
  justify-content: space-between;
  .left-icon{
    color: #C9C9C9;
    font-size: px2rem(16);
    margin-right: px2rem(10);
  }
  .notice-title{
    font-size: px2rem(20);
    color: $black;
    /* font-weight: bold; */
    line-height: 1.5;
    position: relative;
    /* width: calc(100% - 0.8rem); */
    flex: 1;
    .read-state{
      position: absolute;
      left: px2rem(-8);
      top: px2rem(-8);
      width: px2rem(8);
      height: px2rem(8);
      border-radius: 50%;
      background: var(--el-color-danger);
    }
  }
  .notice-content {
    margin-top: px2rem(10);
    font-size: px2rem(16);
    color: $black;
    @include textEllipsis(24, 1);
  }
  .right-info{
    margin-left: px2rem(15);
    width: px2rem(120);
    font-size: px2rem(16);
    color: #555;
  }
}

.notice-title{
  .notice-title{
    font-size: px2rem(22);
    text-align: center;
    color: $black;
    margin-top: px2rem(10);
  }
  .notice-html{
    margin-top: px2rem(15);
    ::v-deep *{
      font-size: px2rem(16) !important;
      line-height: 1.5 !important;
    }
  }
  .bottom-info{
    margin-top: px2rem(5);
    display: flex;
    justify-content: space-between;
    font-size: px2rem(16);
    border-bottom: 1px solid #D7D7D7;
    padding-bottom: px2rem(15);
    position: relative;
    .from{
      color: $mainColor;
      span{
        color: $black_2;
      }
    }
    .time{
      color: #666;
    }
  }
  .bottom-line {
    content: "";
    display: block;
    width: 1.42rem;
    height: 0.02rem;
    background-color: $mainColor;
    position: absolute;
    bottom: 0;
    left: 0;
}
}
</style>